<template>
  <div>
    <el-card shadow="hover">
      <el-form :inline="true" size="small">
        <v-search
          :search="form"
          :formParam="formParam"
          @query="$refs.tableRef.query()"
          @reset="$refs.tableRef.reset()"
        >
          <template #customize="data">
            <el-input
              v-model="formParam[data.key]"
              :placeholder="`请输入自定义`"
              clearable
            />
          </template>
        </v-search>
      </el-form>
    </el-card>
    <!-- 列表 -->
    <el-card shadow="hover" style="margin-top: 10px">
      <v-table
        ref="tableRef"
        :table="table"
        :useFn="getPage"
        :apiParam="{ current: 1, size: 10, daterange: undefined }"
        :formParam="formParam"
      >
        <!-- from -->
        <template #customize="{ item }">
          {{ item.label }}
        </template>
        <!-- 中间层：信息/按钮等 -->
        <!-- <template #info></template> -->
        <!-- table -->
        <template #image="{ row }">
          <el-image
            style="width: 50px; height: 50px"
            :src="row.image"
            :preview-src-list="[row.image]"
            preview-teleported
          />
        </template>
        <template #operate="{ row }">
          <el-popconfirm title="确认删除此项吗？" @confirm="onDelete(row.id)">
            <template #reference>
              <el-button type="text" style="color: #f56c6c">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </v-table>
    </el-card>
  </div>
</template>

<script>
import { get } from "sortablejs";
import { form, table } from "./config/page";
import { tablePage, tableDelete } from "@/api";

export default {
  data() {
    return {
      form,
      table,
      tablePage,
      tableDelete,
      formParam: {},
    };
  },
  methods: {
    getPage() {
      this.$refs.tableRef.setFn(tablePage, {});
    },
    onDelete(id) {
      tableDelete({ id }).then(() => {
        this.$message.success("删除成功");
        onRefresh();
      });
    },
    onRefresh() {
      this.$refs.tableRef.refresh();
    },
  },
  mounted() {
    this.getPage();
  },
};
</script>

<style scoped lang="scss"></style>
